<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-section">
				<view class="left">
					<text :class="info.icon"></text>
				</view>
				<view class="right">
					<view style="color:#333;font-size: 16px;font-weight: bold;">{{info.name}}详情</view>
					<view class="mt-20" style="font-size:12px;color:#666;">{{info.description}}</view>
				</view>
			</view>
			<view v-if="info.stats" class="section py-20">
				<view class="grid row-2">
					<view v-for="item in info.stats">
						<view style="font-size: 14px;color:#999;"> {{item.label}}</view>
						<view class="mt-10" style="color:#333;font-size: 16px;font-weight: bold;">{{item.value}}</view>
					</view>
				</view>
			</view>

			<view v-if="info.responsibilities" class="section py-20">
				<view class="section-title">核心职责</view>
				<view class="px-30">
					<view style="font-size: 14px;display: flex;align-items: center;margin:15rpx 0;"
						v-for="item in info.responsibilities">
						<text class="li-icon ri-check-fill mr-20"></text>{{item}}
					</view>
				</view>
			</view>
<view v-if="info.gridComparison" class="section py-20">
				<view class="section-title">社区与村级网格对比</view>
				<view class="px-30">
					<view class="p-30" style="border-radius: 15px;background-color: #EEF2FF;">
						<view class="mb-30" style="font-size: 16px;font-weight: bold;color:#333">社区网络</view>
						<view style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">网格数量</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.community.count}}个</view>
						</view>
						<view  class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">平均人口</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.community.avgPopulation}}人/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">月均事件</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.community.avgEvents}}件/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">满意度</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.community.satisfaction}}%</view>
						</view>
					</view>
					
					<view class="p-30 mt-30" style="border-radius: 15px;background-color: #F0FDF4;">
						<view class="mb-30" style="font-size: 16px;font-weight: bold;color:#333">村级网络</view>
						<view style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">网格数量</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.village.count}}个</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">平均人口</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.village.avgPopulation}}人/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">月均事件</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.village.avgEvents}}件/网格</view>
						</view>
						<view class="mt-10" style="display: flex;align-items: center;">
							<view style="flex-grow: 1;padding-right: 10px;color:#555;font-size: 14px;">满意度</view>
							<view style="flex-shrink: 0;color:#333;font-size: 14px;">{{info.gridComparison.village.satisfaction}}%</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="info.topGrids" class="section py-20">
				<view class="section-title">优秀网格示例</view>
				<view class="px-30">
					<view class="p-30" style="display: flex;align-items: center;margin:15rpx 0;background-color: #f7f7f7;border-radius: 15px;"
						v-for="item in info.topGrids">
						<view style="flex-grow: 1;">
							<view style="font-size: 14px;font-weight: bold;">{{item.name}}</view>
							<view class="mt-10" style="font-size: 12px;color:#999;">{{item.type}} | 网格长：{{item.leader}}</view>
						</view>
						<view style="flex-shrink: 0;">
							<view  style="font-size: 12px;color:#999;">月事件</view>
							<view class="mt-10" style="font-size: 16px;font-weight: bold;">{{item.events}}件</view>
						</view>
						<view style="width:30px;height:30px;background-color: white;color:#2AAB5A;flex-shrink: 0;border-radius: 30px;margin-left: 15px;text-align: center;line-height: 30px;">{{item.score}}</view>
					</view>
				</view>
			</view>
			<view style="height:30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getGovernanceDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: false,
				info: {
					"level": "三级长",
					"type": "grid",
					"id": null,
					"name": "网格级",
					"managers": "网格长",
					"color": "purple",
					"icon": "layout-grid-line",
					"gradient": "from-purple-500 to-indigo-500",
					"shortDescription": "信息收集",
					"description": "网格级是社区和行政村内部的管理单元，由网格长负责信息收集、问题上报和初步协调处理。",
					"stats": [{
							"label": "网格总数",
							"value": "135个"
						},
						{
							"label": "主要负责人",
							"value": "网格长"
						},
						{
							"label": "平均人口",
							"value": "421人/网格"
						},
						{
							"label": "平均面积",
							"value": "1.39平方公里/网格"
						}
					],
					"responsibilities": [
						"日常巡查与问题发现",
						"收集社情民意与问题上报",
						"执行社区/村级交办事项",
						"组织居民/村民参与活动"
					],
					"events": null,
					"units": null,
					"gridComparison": {
						"community": {
							"count": 24,
							"avgPopulation": 537.0,
							"avgEvents": 7.8,
							"satisfaction": 93.2
						},
						"village": {
							"count": 111,
							"avgPopulation": 395.0,
							"avgEvents": 9.4,
							"satisfaction": 94.8
						}
					},
					"topGrids": [{
							"name": "镇川社区第三网格",
							"type": "社区网格",
							"events": 42,
							"leader": "陈明",
							"score": 97
						},
						{
							"name": "东湖村中心网格",
							"type": "村网格",
							"events": 38,
							"leader": "王华",
							"score": 95
						},
						{
							"name": "平安村二网格",
							"type": "村网格",
							"events": 36,
							"leader": "李刚",
							"score": 94
						},
						{
							"name": "镇川社区第一网格",
							"type": "社区网格",
							"events": 39,
							"leader": "张丽",
							"score": 93
						}
					],
					"unitTypes": null,
					"unitTypesPerformance": null,
					"performanceScore": 88,
					"responseTime": 3.6,
					"responseTimeChange": -0.9
				},
				options: {},
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function() {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getGovernanceDetail(this.options.level).then(res => {
					this.info = res.layout;
					this.pageLoading = false;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.tag {
		display: block;
		padding: 2px 8px;
		background-color: #DCFCE7;
		border-radius: 50em;
		color: #5FC483;
		font-size: 10px;
	}

	.table {
		display: table;
		width: 100%;
		border: 1rpx solid #eee;

		.row {
			display: table-row;

			border-bottom: 1rpx solid #eee;
			color: #333;
			font-size: 12px;
		}

		.cell {
			display: table-cell;
			padding: 8px;
			text-align: center;

		}

		.header {
			background: #f8f8f8;
			font-weight: bold;
			color: #999;
			font-size: 12px;
		}
	}

	.li-icon {
		width: 20px;
		height: 20px;
		color: #4076ED;
		background-color: #e5f1fe;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.first-section {
		display: flex;
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		padding: 40rpx 30rpx;
		background-color: white;
		border-radius: 10px;
		background-color: #F5EDFF;
		color: white;
		border: 1rpx solid #F1E7FE;

		.left {
			width: 50px;
			height: 50px;
			color: #4076ED;
			background-color: #F3E8FF;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.right {
			padding-left: 30rpx;
		}
	}

	.section {
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		background-color: white;
		border-radius: 10px;

		.section-title {
			font-size: 17px;
			font-weight: bold;
			padding: 20px;
		}

		.badge {
			display: inline-block;
			font-size: 12px;
			background-color: lightcoral;
			color: white;
			padding: 2px 8px;
			border-radius: 5px;
		}
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;

		.tabs-item {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			padding: 10px 20px;
			border-bottom: 2px solid #eee;

			&.on {
				border-color: lightcoral;
			}
		}
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

		&>view {
			width: calc(50% - 20px);
			margin: 10px;
			text-align: center;
		}

		&.row-2 {
			&>view {
				width: calc(50% - 20px);
			}
		}
	}

	.sub-title {
		display: flex;
		align-items: center;
		padding: 15px;

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #eee;
			text-align: center;
			line-height: 40px;
		}

		.center {
			padding-left: 10px;
			flex-grow: 1;
		}

		.right {
			font-size: 12px;
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightcyan;
			color: royalblue;
			border: 1rpx solid #eee;

		}
	}

	.village-list {
		margin: -5px;
	}

	.village-item {
		color: #666;
		margin: 5px;
		font-size: 12px;
		display: inline-block;
		padding: 2px 8px;
		border-radius: 5px;
		background-color: white;
		border: 1rpx solid #eee
	}

	.levels-item {
		padding: 10px 20px;
		display: flex;
		align-items: center;

		.left {
			flex-shrink: 0;
			background-color: lightsalmon;
			color: white;
			text-align: center;
			line-height: 40px;
			width: 40px;
			height: 40px;
		}

		.right {
			padding-left: 15px;
			flex-grow: 1;
		}
	}


	.tags {
		margin-left: -5px;
		margin-right: -5px;

		&>view {
			display: inline-block;
			padding: 4px 10px;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 50em;
			color: white;
			font-size: 12px;
			margin: 5px;

			&>text {
				margin-right: 5px;
			}
		}

	}
</style>